<template>
  <n-modal preset="card" v-model:show="showFlag" :trap-focus="false">
    <template #header>{{ title }}</template>
    <template #header-extra>
      <slot name="header-extra"></slot>
    </template>

    <slot name="content"></slot>

    <template #footer v-if="showFooter">
      <n-space justify="end">
        <n-button @click="cancle">取消</n-button>
        <n-button type="primary" @click="sure">确定</n-button>
      </n-space>
    </template>
  </n-modal>
</template>

<script setup lang="ts">
const props = defineProps<{
  show: boolean
  title: string
  showFooter?: boolean
}>()
const emit = defineEmits<{
  (e: 'update:show', val: boolean): void
}>()

const showFlag = computed({
  set(val: boolean) {
    emit('update:show', val)
  },
  get() {
    return props.show
  }
})

function cancle() {
  showFlag.value = false
}

function sure() {
  showFlag.value = false
}
</script>

<style lang="less" scoped></style>
